<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
    <!-- 等号总结： 单等是赋值   双等是判断  三等是全等 -->
    <!-- 
        运算符 （operator）也被称作为 操作符 是用于实现 赋值 比较 和执行 行算数运算等功能的符号 
         
           1   算数运算符：
                          加+  减-  乘*  除/  % 取余数 eg： 返回除法的余数 9 % 2 = 1
                 1.1   浮点数的精度问题： 浮点数值的最高精度是17位小数，但在进行算式计算时其精度远远不如整数
                       var result= 0.1 + 0.2；  结果不是0.3 而是 0.30000000000000004
                       var result= 0.1 * 0.2；  结果不是0.02 而是 0.020000000000000004
                 1.2   表达式：是由数字 运算符 变量等组成的式子 我们称为 表达式  1 + 1  
                               表达式最终都会有一个结果 返回给我们 我们称之为 返回值   
                               console.log(1 + 1)  // 2  2就是返回值
                               // 在我们程序里面 2=1 + 1  把我们的右边表达式计算完毕后把 返回值 给左边
                                   var num = 1 + 1；  num就等于2 


           2   递增和递减运算符 ：
                                如果需要反复给数字变量添加或减去1 可以使用  递增（+ +） 和 递减 （- -） 运算符来完成
                                递增（+ +） 和 递减 （- -） 既可以防砸变量前面 也可以放在变量后面， 放在变量前面时我们
                                称之为 前置 递增（递减）运算符  放在变量后面时 我们称之为 后置递增(递减)运算符
                                 注意  递增和递减 运算符 必须和变量配合使用

                              2.1  前置递增运算符： ++num  前置递增 就是自加1      使用口诀 ： 先自加 1  再返回值                    
                              2.1  后置递增运算符： num++  前置递增 就是自加1      使用口诀 ：  先返回原值 后自加   以后常用
           3   比较运算符
                        叫关系运算符，是两个数据进行比较时所用的运算符，比较运算后 会返回一个布尔值（true/false）作为比较运算的结果
                         >大于号  <小于号  >=大于等于号（大于或者等于）  <=小于等于号（小于或者等于） 
                          ==判等号（会转型）  !=不等号  
                          ===和!==全等号要求值和数据类型都一致 要求 两侧的值 还有数据类型完全一致才可以
           4   逻辑运算符
                        是用来进行布尔值的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
                        4.1  &&  逻辑与 简称“与” and     true&&false
                        4.2  ||  逻辑或 简称“或” or      true||flase
                        4.3  ！  逻辑非 简称“非” not      ！ture
                        4.4  短路运算（逻辑中断）：原理：当有多个表达式 （值） 时， 左边的表达式（值）可以确定结果时，就不再继续算右边的表达式的值
                             逻辑与 
                                  语法： 表达式1 && 表达式2
                                   如果第一个表达式的值为真，则返回表达式2
                                   如果第一个表达式的值为假，则返回表达式1
                            逻辑或
                                 语法： 表达式1 || 表达式2
                                   如果第一个表达式的值为真，则返回表达式1
                                   如果第一个表达式的值为假，则返回表达式2
           5   赋值运算符
                        是用来把数据赋值给变量的运算符
                        = 直接赋值
                        += -= 加减一个数后在赋值
                        *= /= %= 乘除 取余后再赋值

          6   运算符优先级    运算符
                                小括号  （）
                                一元运算符  ++加加 --减减 ！逻辑非
                                算数运算符  先 * / % 后 + -
                                关系运算符  > <  >= <=
                                相等运算符 ==判断号 !=不等号    全等号=== !==
                                逻辑运算符  先&& 后 ||
                                赋值运算符 =
                                逗号运算符 ，
    -->
                        <!-- 运算的优先级练习 -->
                         <script>    // flase          true                true            true
                            console.log(4 >6  ||  '人' != '阿凡达' && !(12 * 2 == 144 ) && true ); // true  最后 先算 与  再算 非 所以最后结果 为真 
                            
                         </script>
        <!-- 1 -->
            <script>
                console.log(1 + 1);
                //  取余 %
                console.log((4 % 2));// 0
                console.log((3 % 5));// 3
               //  浮点数 算数里面会有问题
               console.log(0.1 + 0.2 ); 
               console.log(0.1 * 0.2 ); 
               //  我们不能拿着浮点数来进行 相比较是否相等
               var num = 0.1 + 0.2;
               console.log(num == 0.3); // false

            //    如何判断一个数能被整除： 它的余数为0 说明这个数能被 整除 这就是 % 取余运算符的主要用途
            // 算术运算先后 和数学上一致
            </script>



        <!-- 2 -->
             <script>
                //  前置递增运算符
                 var age=10;
                ++age;  //类似于age=age + 1 
                console.log(age );  //  11
                //  先加1 后返回值
                var p =10;
                console.log(++p + 10);// 21

                  //  后置递增运算符
                  var num=10;
                  num++ ; // num=num + 1
                console.log(num);

                // 前置递增和后置递增如果单独使用  效果是一样的
                // 后置递增  使用口诀 ：  先返回原值 后自加
                var zz=10;
                console.log(zz++ + 10); // 20  先把zz返回原值10 在和后面的10相加 所以变成20
                console.log(zz);       // 返回原值后zz 再自加1 所以 zz 变成了 11             先运算 后 自增
                
                
                //前置后置练习题
                var a=10;
                ++a;             // 11
                var b=(++a + 2); // ++a=12 a=12
                console.log(b);  //14


                var c=10;
                c++;            // c++=11 c=11
                var d=c++ + 2;  // c++=11  这时这里的c=12  
                console.log(d); // 13


                var e= 10;
                var f=e++ + ++e; // 1.  e++=10  e=11   2. 前面e的基础上再加1  所以e=12  ++e=12 
                console.log(f); // 220
            </script>



            <!-- 3 -->
            <script>
                console.log(3 >= 5); //flase
                console.log(6 >= 5); //true
                // 程序里面的等号 ==    默认转换数据类型， 会把字符串型的数据转换为数字型
                console.log(5 == 5); //true
                console.log('pink老师' == '照着'); //flase
                console.log(18 == '18');     //true  默认转换数据类型， 会把字符串型的数据转换为数字型
                //  不等于
                console.log(12 != 12);  //flase
                console.log(18 === 18);
                // 全等  一模一样    要求 两侧的值 还有数据类型完全一致才可以
                console.log(18 === 18);    // true
                console.log(18 === '18'); //flase
            </script> 



          <!-- 4 逻辑运算符 -->
           <script>
            //    4.1 逻辑与 && and  两侧都为true 结果才是 true 只要有一侧为flase 结果就为flase
               console.log(3 > 5 && 3 > 2);  // false  只要有一个是假的 其结果就是假的
               console.log(3 < 5 && 3 > 2);  // ture  
            //    4.2 逻辑或 || or  两侧都为flase 结果才是 flase 只要有一侧为true 结果就为true
               console.log(3 > 5 || 3 > 2); // true
               console.log(3 > 5 || 3 < 2); // flase
            //   4.3 逻辑非 ！ not
            console.log(!true); // flase  非真的呢就是假的哦
            //   4.4  短路运算（逻辑中断）
             // 1    用我们的布尔值参与的逻辑运算   true && flase == flase
             // 2    123 && 456 是值 或者是表达式 参与的逻辑运算
            //     数字中只有 0 是假的 其他数字都是真的
            //  3  逻辑与 短路运算    如果第一个表达式的值为真，则返回表达式2    如果第一个表达式的值为假，则返回表达式1
                console.log(123 && 456); // 456            
                console.log(0 && 456); // 0            
                console.log(0 && 1 + 2 && 456 * 789); // 0  第一个是假的 后面的都不参与运算 直接返回第一个           
                //  0 '' null undefined NaN  这些都是假的

                // 4  逻辑或  短路运算    如果第一个表达式的值为真，则返回表达式1   如果第一个表达式的值为假，则返回表达式2
                console.log(123 || 456); // 123   爷是你爹
                console.log(0 || 456 || 123 + 456); // 456
                
                
                // 练习  逻辑中断很重要 他会影响程序运行的结果
                 var shu=0;
                 console.log(123 || shu++);
                 console.log(shu); // 0 因为 123为真的 直接返回表达式1  所以 后面的shu++ 程序直接不编译 最后的shu还是0
            


            // 练习题
             var shuzi=7;
             var  str='我爱你~中国~' // 一共七个字符
             console.log(shuzi > 5 && str.length >= shuzi);       //true
             console.log(shuzi < 5 && str.length >= shuzi);       //flase
             console.log(!(shuzi  < 10));                         //flase
             console.log(!(shuzi < 10 || str.length == shuzi) );  //flase
           </script>



            <!-- 6 赋值运算符 -->
           <script>
            
            var fu=10;
            //fu =fu+1;  fu++
            //fu=fu+2;   fu += 2;
            fu += 2;        //每次自加2
            console.log(fu); //12
            // 乘
            var fu1=2;
            fu1 *= 3;
            console.log(fu1);

           </script>
